<!DOCTYPE html>
<html lang="zh-CCN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Root管理员控制面板</title>
  <link rel="stylesheet" href="./../../static/root/css/style.css">
  <script defer src="./../../static/root/js/class-type-management.js"></script>
</head>
<body>
  <!-- 顶部导航栏 -->
  <header class="navbar">
    <div class="logo">RootAdmin</div>
    <h1>系统管理 - Root管理员</h1>
    <div class="user-info">
      <img src="admin-avatar.jpg" alt="Admin Avatar" class="avatar">
      <span>Root管理员</span>
      <button class="logout-btn" id="logout-btn">退出</button>
    </div>
  </header>

  <!-- 侧边导航栏 -->
	<aside class="sidebar">
		<ul>
			<li><a href="root-management.html">用户管理</a></li>
			<li class="menu-item">
			<!-- 一级菜单 -->
				<a href="#" class="menu-header">基础数据管理</a>
				<!-- 二级菜单 -->
				<ul class="submenu">
					<li><a href="activity-category.html">活动分类管理</a></li>
					<li><a href="class-type-management.html">教学班类型管理</a></li>
				</ul>
			</li>
		</ul>
	</aside>


  <!-- 主内容区域 -->
  <main>
    <section class="data-management" id="data-management">
      <h2>基础数据管理</h2>
      <div class="class-type-management">
        <h3>教学班类型管理</h3>
        <button id="add-class-type-btn">新增教学班类型</button>
        <table>
          <thead>
            <tr>
              <th>类型ID</th>
              <th>类型名称</th>
              <th>操作</th>
            </tr>
          </thead>
          <tbody id="class-type-table-body">
            <!-- 教学班类型数据将动态加载 -->
          </tbody>
        </table>
      </div>
    </section>
  </main>

  <!-- 弹窗 -->
  <div id="data-modal" class="modal">
    <div class="modal-content">
      <span id="close-modal" class="close-btn">&times;</span>
      <h2 id="modal-title">新增数据</h2>
      <form id="data-form">
        <label for="name">名称：</label>
        <input type="text" id="name" name="name" required>
        <div class="button-container">
          <button type="submit" id="save-data-btn">保存</button>
          <button type="button" id="cancel-btn" class="cancel-btn">取消</button>
        </div>
      </form>
    </div>
  </div>

  <!-- 底部信息 -->
  <footer class="footer">
    <p>© 2024 RootAdmin, All Rights Reserved</p>
    <a href="/help">帮助</a> | <a href="/contact">联系我们</a>
  </footer>
</body>
</html> 